<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>外卖登录界面</title>
    <link rel="icon" href="./../images/favico.ico">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="../styles/login.css">
    <!--不同屏幕尺寸根字体设置-->
    <script src="./../js/base.js"></script>
    <!--引入vue-->
    <script src="../../backend/plugins/vue/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css">
    <!-- 引入组件库 -->
    <script src="../../backend/plugins/element-ui/index.js"></script>
</head>

<body>
<div class="limiter" id="login">
    <div class="container-login100">
        <div class="wrap-login100">
            <div class="login100-form-title" style="background: #6a4d30;padding: 10px 15px 10px 15px;">
                <span class="login100-form-title-1" style="font-size:20px">注 册 账 号</span>
            </div>
            <el-form :model="ruleForm"  :rules="rules" ref="ruleForm"
                     class="demo-ruleForm" label-width="auto">
                    <el-upload
                            style="display: flex"
                            class="avatar-uploader"
                            action="/common/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :on-change="onChange"
                            ref="upload"

                    >
                        <img v-if="image" :src="image" class="avatar" style="height: 80px;width: 80px;border-radius: 100%"></img>
                        <i v-else class="el-icon-circle-plus" style="display: block; margin: 37% 0;font-size: 20px;"
                        ></i>
                    </el-upload>

                <el-form-item label="用户名:" prop="userName">
                    <el-input v-model="ruleForm.userName" autocomplete="off" placeholder="登录的用户名"></el-input>
                </el-form-item>

                <el-form-item label="密码:" prop="password">
                    <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="密码"></el-input>
                </el-form-item>

                <el-form-item label="确认密码:" prop="checkPass">
                    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" placeholder="再次验证密码"></el-input>
                </el-form-item>

                <el-form-item label="邮箱:" prop="email">
                    <el-input v-model="ruleForm.email" autocomplete="off" placeholder="找回密码使用的邮箱"></el-input>
                </el-form-item>

                <el-form-item label="手机号:" prop="phone">
                    <el-input v-model="ruleForm.phone" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="姓名:" prop="name">
                    <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <div style="display: flex;width: 100%;align-items: center;justify-content: center;height: 20px;">
                    <input type="radio" id="age1" name="age" value="1" v-model.number="ruleForm.sex" style="zoom:1.3;">
                    <label for="age1" style="font-size: 13px">男</label>
                    <div style="width: 15%"></div>
                    <input type="radio" id="age2" name="age" value="0" v-model.number="ruleForm.sex" style="zoom:1.3;">
                    <label for="age2" style="font-size: 13px">女</label>
                </div>
                <el-form-item style="display: flex;align-items: center;justify-content: center" label-width="auto">
                    <el-link type="primary" style="position: absolute;right: -100px;top: 10px;" @click="toLogin">前往登录</el-link>
                    <el-button type="primary" @click="submitForm('ruleForm')" style="background-color: #ffc200;color: #606266">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>

<!-- 引入axios -->
<script src="../../backend/plugins/axios/axios.min.js"></script>
<script src="./../js/request.js"></script>
<script src="./../api/login.js"></script>
<script src="./../api/register.js"></script>
<!--验证码-->
<script>


    // createCode()
    function createCode() {
        code = "";
        var codeLength = 4;//验证码的长度，可变
        var canvas = document.getElementById('myCanvas');//获取画布
        var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L',
            'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');//所有候选组成验证码的字符

        for (var i = 0; i < codeLength; i++) {
            var charIndex = Math.floor(Math.random() * 36);
            code += selectChar[charIndex];
        }
        if (canvas) {
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = '#FFFFFF';
            ctx.fillRect(0, 0, 70, 27);
            ctx.font = "20px arial";
// 创建渐变
            var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
            gradient.addColorStop("0", "magenta");
            gradient.addColorStop("0.5", "blue");
            gradient.addColorStop("1.0", "red");
// 用渐变填色
            ctx.strokeStyle = gradient;
            ctx.strokeText(code, 5, 20);//画布上添加验证码
            console.log(code)
            return code;
        }
    }
</script>


<script>
    new Vue({
        el: "#login",
        data() {
            var validateUserName = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入用户名'));
                }
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            var checkEmail = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入邮箱'));
                }
            };
            var checkPhone = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入手机号'));
                }
            };
            var checkName = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入姓名'));
                }
            };
            var checkSex = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('选择性别'));
                }
            };
            return {
                image:"",
                isSubmit:false,
                ruleForm: {
                    avatar: "",
                    userName: "",
                    password: "",
                    checkPass: "",
                    email: "",
                    phone: "",
                    name: "",
                    sex: "",
                    status:1
                },
                rules: {
                    userName: [
                        {validator: validateUserName, trigger: 'blur'}
                    ],
                    password: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                    email: [
                        {validator: checkEmail, trigger: 'blur'}
                    ],
                    phone: [
                        {validator: checkPhone, trigger: 'blur'}
                    ],
                    name: [
                        {validator: checkName, trigger: 'blur'}
                    ],
                    sex: [
                        {validator: checkSex, trigger: 'change'}
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (!valid) {
                        // this.$notify.error({
                        //     title: '用户名'+'不能为空',
                        //     position: 'top-left'
                        // });
                        return false;
                    }
                });
                // console.log(this.ruleForm.sex)
            // !=''&&this.ruleForm.pass!=''&&this.ruleForm.checkPass!=''&&this.ruleForm.email!=''&&this.ruleForm.phone!=''&&name!=''&&this.ruleForm.sex!=''
                var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                //调用正则验证test()函数
                isok= reg.test(this.ruleForm.email);


                var reg_phone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;

                if(!reg_phone.test(this.ruleForm.phone)){
                    this.$message.error("请输入正确的手机号码")
                    return
                }else
                if (!isok){
                    this.$message.error("请输入正确的邮箱格式")
                    return
                }else
                if (this.ruleForm.avatar==""){
                    this.$message.error("请添加头像")
                    return
                }else if (this.ruleForm.userName==""){
                    this.$message.error("请添加用户名")
                    return
                }else if (this.ruleForm.password==""){
                    this.$message.error("请添加密码")
                    return
                }else if (this.ruleForm.checkPass==""){
                    this.$message.error("请添加二次密码")
                    return
                }else if (this.ruleForm.email==""){
                    this.$message.error("请添加邮箱")
                    return
                }else if (this.ruleForm.phone==""){
                    this.$message.error("请添加手机号")
                    return
                }else if (this.ruleForm.name==""){
                    this.$message.error("请添加姓名")
                    return
                }else if (this.ruleForm.sex==null){
                    this.$message.error("请添加性别")
                    return
                }else {
                    console.log("开始操作了")
                    registerApi(this.ruleForm).then((res =>{
                        if (res.code==0){
                            this.$message.error(res.msg)

                        }else {
                            this.$message.success(res.data)
                        }
                    }))
                    .catch(err=>{
                        this.$message.error(err)
                    })
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleAvatarSuccess (response, file, fileList) {
                    this.image = `/common/download?name=${response.data}`
                    this.ruleForm.avatar = response.data
            },
            onChange (file) {
                if(file){
                    const suffix = file.name.split('.')[1]
                    const size = file.size / 1024 / 1024 < 2
                    if(['png','jpeg','jpg'].indexOf(suffix) < 0){
                        this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                        this.$refs.upload.clearFiles()
                        return false
                    }
                    if(!size){
                        this.$message.error('上传文件大小不能超过 2MB!')
                        return false
                    }
                    return file
                }
            },
            toLogin(){
                window.requestAnimationFrame(()=>{
                    window.location.href= '/front/page/login.html'
                })
            }
        }
    })
</script>


</body>

</html>